<template>
    <div class="cgisDatas">
        <!-- <div>
            <span>物料大类:</span><a-input class="bacClass" v-model="bigName" :style="{ width: '150px' }" allow-clear />
        </div>
        <div>
            <span>物料中类:</span><a-input class="bacClass" v-model="bigName1" :style="{ width: '150px' }" allow-clear />
        </div>
        <div>
            <span>物料小类:</span><a-input class="bacClass" v-model="samllName" :style="{ width: '150px' }" allow-clear />
        </div> -->
        <div>
            <span>物料大类:</span>
            <a-select popup-container="html" class="bacClass" v-model="objectOP.bigClassName1" @change="bigChange1"
                @search="WLfocusSel(1, $event);" :filter-option="false" allow-search allow-clear @focus="WLfocusSel(1)"
                style="width:150px">
                <a-option v-for="item in objectOP.bigName1" :value="item.id">
                    {{ item.bigClassName }}
                </a-option>
            </a-select>
        </div>
        <div>
            <span>物料中类:</span>
            <a-select popup-container="html" class="bacClass" :disabled="!objectOP.bigClassName1"
                v-model="objectOP.bigClassName2" @change="bigChange2" :filter-option="false" allow-search allow-clear
                @focus="WLfocusSel(2)" @search="WLfocusSel(2, $event);" style="width:150px">
                <a-option v-for=" item in objectOP.bigName2" :value="item.id">
                    {{ item.middleClassName }}
                </a-option>
            </a-select>
        </div>
        <div>
            <span>物料小类:</span>
            <a-select popup-container="html" class="bacClass" :disabled="!objectOP.bigClassName2"
                v-model="objectOP.bigClassName3" :filter-option="false" allow-search allow-clear @focus="WLfocusSel(3)"
                @search="WLfocusSel(3, $event);" @change="bigChange3" style="width:150px">
                <a-option v-for="item in objectOP.bigName3" :value="item.id">
                    {{ item.subClassName }}
                </a-option>
            </a-select>
        </div>
        <div>
            <span>物料编号:</span><a-input class="bacClass" v-model="isLyCodeds" :style="{ width: '150px' }" allow-clear />
        </div>
        <div>
            <span>物料名称:</span><a-input class="bacClass" v-model="isLyNameds" :style="{ width: '150px' }" allow-clear />
        </div>
        <div>
            <span>规格:</span><a-input class="bacClass" v-model="specName" :style="{ width: '150px' }" allow-clear />
        </div>
        <a-button type="primary" size="mini" @click="cxCgsLists">查询</a-button>
    </div>
    <!-- <a-table :style="{
        height: '500px',
        marginTop: '10px',
    }" :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }" rowKey="typeLesIds"
        v-model:selected-keys="selectedRowKeys2" stripe :bordered="true" :scrollbar="true" sticky-header :pagination="false"
        :columns="props.urlSelect == 'wms/ironwareStockSummary/getPage' ? cgColumns6 : cgColumns5" :data="wlListXqs">
        <template #oldNewService="{ record }">
            <el-checkbox v-model="record.oldNewService" disabled :true-label="1" :false-label="0"></el-checkbox>
        </template>
        <template #fixAssetStatus="{ record }">
            <el-checkbox v-model="record.fixAssetStatus" disabled :true-label="1" :false-label="0"></el-checkbox>
        </template>
    </a-table> -->
    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
        @grid-ready="gridReady" style="height:75vh" :defaultColDef="defaultColDef" class='ag-theme-alpine'
        @SelectionChanged="selects" :rowData="wlListXqs"
        :columnDefs="props.urlSelect == 'wms/ironwareStockSummary/getPage' ? cgColumns6 : cgColumns5"
        :localeText="localeText1">
    </AgGridVuesCopys>
    <paginationCopys :total="fySelet4.total" show-total show-jumper show-page-size @change="PageSize4"
        @page-size-change="change4" style="justify-content: center;margin-top: 15px;" :page-size="fySelet4.size"
        :current="fySelet4.page" />
</template>
<script setup lang="ts">
import { ref, watch } from "vue"
import { post, get } from "@/api/http"
import { Message } from '@arco-design/web-vue'
import { localeText } from '@/api/aggridZw'
const props = defineProps({
    whId: Number,
    urlSelect: String
})

//下拉框   物料大类  
const WLfocusSel = (val: any, eventVal: any = null) => {
    if (!eventVal) eventVal = ''
    if (val === 1) {
        post({
            url: 'purchase/MaterialBigClass/getFieldValue',
            data: { "bigClassName": eventVal },
        }).then(({ data, code }: any) => {
            if (code === 200) {
                objectOP.bigName1 = data
            } else {
                Message.error({
                    content: '查询失败！',
                    duration: 5000,
                })
            }
        })
    } else if (val === 2) {
        post({
            // url: 'purchase/MaterialMiddleClass/getList',
            // data: { bigClassId: objectOP.bigClassName1 },
            url: 'purchase/MaterialMiddleClass/getFieldValue',
            data: { "middleClassName": eventVal, filterMap: { "bigClassId": objectOP.bigClassName1 } }
        }).then(({ data, code }: any) => {
            if (code === 200) {
                objectOP.bigName2 = data
            } else {
                Message.error({
                    content: '查询失败！',
                    duration: 5000,
                })
            }
        })
    } else if (val === 3) {
        post({
            url: 'purchase/MaterialSubClass/getFieldValueFilter',
            data: { subClassName: eventVal, filterMap: { middleClassId: objectOP.bigClassName2 } },
        }).then(({ data, code }: any) => {
            if (code === 200) {
                objectOP.bigName3 = data
            } else {
                Message.error({
                    content: '查询失败！',
                    duration: 5000,
                })
            }
        })
    }
}
const objectOP = reactive<any>({
    bigClassName1: '',
    bigClassName2: '',
    bigClassName3: '',
    bigClassNameP1: '',
    bigClassNameP2: '',
    bigClassNameP3: '',
    bigName1: [],
    bigName2: [],
    bigName3: [],
})
const WLoptions1 = ref<any>(objectOP.bigName3)
const WLloading1 = ref(false)
const WLhandleSearch1 = (value: any) => {
    if (value) {
        const ob = { subClassName: value, filterMap: { middleClassId: objectOP.bigClassName2 } }
        WLloading1.value = true
        post({
            url: '/purchase/MaterialSubClass/getFieldValueFilter',
            data: ob,
        }).then(({ data, code }: any) => {
            if (code === 200) {
                objectOP.bigName3 = data
            } else {
                Message.error({
                    content: '查询失败！',
                    duration: 5000,
                })
            }
        })
        WLoptions1.value = objectOP.bigName3
        WLloading1.value = false
    } else {
        WLoptions1.value = []
    }
}
const bigChange1 = () => {
    objectOP.bigName2 = []
    objectOP.bigClassName2 = ''
    objectOP.bigName3 = []
    objectOP.bigClassName3 = ''
    objectOP.bigClassNameP1 = ''
    if (objectOP.bigClassName1 != '' || objectOP.bigClassName1 != null || objectOP.bigClassName1 != undefined) {
        objectOP.bigName1.forEach((item: any) => {
            if (item.id == objectOP.bigClassName1) {
                objectOP.bigClassNameP1 = item.bigClassName
            }
        })
    } else {
        objectOP.bigClassNameP1 = ''
    }
}
const bigChange2 = () => {
    objectOP.bigName3 = []
    objectOP.bigClassName3 = ''
    objectOP.bigClassNameP2 = ''
    if (objectOP.bigClassName2 != '' || objectOP.bigClassName2 != null || objectOP.bigClassName2 != undefined) {
        objectOP.bigName2.forEach((item: any) => {
            if (item.id == objectOP.bigClassName2) {
                objectOP.bigClassNameP2 = item.middleClassName
            }
        })
    } else {
        objectOP.bigClassNameP2 = ''
    }

}
const bigChange3 = () => {
    objectOP.bigClassNameP3 = ''
    if (objectOP.bigClassName3 != '' || objectOP.bigClassName3 != null || objectOP.bigClassName3 != undefined) {
        objectOP.bigName3.forEach((item: any) => {
            if (item.id == objectOP.bigClassName3) {
                objectOP.bigClassNameP3 = item.subClassName
            }
        })
    } else {
        objectOP.bigClassNameP3 = ''
    }
}
const emits = defineEmits(['getRowData'])


const fySelet4: any = reactive({
    total: 10,
    size: 10,
    page: 1
})

const selectedRowKeys2: any = ref([])

const wlListXqs: any = ref([])

const PageSize4 = (val: any) => {
    fySelet4.page = val
    cxCgsLists()
}

const change4 = (val: any) => {
    fySelet4.size = val
    cxCgsLists()
}


const isLyCodeds: any = ref('')
const isLyNameds: any = ref('')
const bigName: any = ref('')
const bigName1: any = ref('')
const samllName: any = ref('')
const specName: any = ref('')
let typeLesIds: any = 0
const cxCgsLists = async () => {
    if (props.urlSelect == "wms/ironwareStockSummary/getPage") {
        const res: any = await post({
            url: props.urlSelect,
            data: {
                page: fySelet4.page,
                size: fySelet4.size,
                warehouseId: props.whId,
                materialCode: isLyCodeds.value,
                materialName: isLyNameds.value,

                majorCategory: objectOP.bigClassNameP1,
                subCategory: objectOP.bigClassNameP3,
                middleCategory: objectOP.bigClassNameP2,

                specification: specName.value,
            }
        })
        if (res.code == 200) {
            wlListXqs.value = res.data.data
            gridOption.value.setRowData(res.data.data)
            wlListXqs.value.forEach((res: any) => {
                res['typeLesIds'] = typeLesIds++
                res['totalNum2'] = res.totalNum
            })
            fySelet4.total = res.data.total
        }
    } else if (props.urlSelect == "wms/ironwareStockSummary/getPage") {
        const res: any = await post({
            url: props.urlSelect,
            data: {
                page: fySelet4.page,
                size: fySelet4.size,
                warehouseId: props.whId,
                materialCode: isLyCodeds.value,
                materialName: isLyNameds.value,

                majorCategory: bigName.value,
                subCategory: samllName.value,

                specification: specName.value,
            }
        })
        if (res.code == 200) {
            wlListXqs.value = res.data.data
            gridOption.value.setRowData(res.data.data)
            wlListXqs.value.forEach((res: any) => {
                res['typeLesIds'] = typeLesIds++
                res['totalNum2'] = res.totalNum
            })
            fySelet4.total = res.data.total
        }
    }

}

const selects = () => {
    let kcWhList = gridOption.value.getSelectedRows()
    console.log(selectedRowKeys2.value)
    emits('getRowData', kcWhList)
}
// watch(() => gridOption.value.getSelectedRows(), () => {
//     // let kcWhList = wlListXqs.value.filter((e: any) => {
//     //     return selectedRowKeys2.value.includes(e['typeLesIds'])
//     // })
//     let kcWhList = gridOption.value.getSelectedRows()
//     console.log(selectedRowKeys2.value)
//     emits('getRowData', kcWhList)
// })

const delWhList = () => {
    isLyCodeds.value = ''
    isLyNameds.value = ''
    selectedRowKeys2.value = []
    wlListXqs.value = []
}

defineExpose({
    delWhList,
})
const cgColumns6: any = [
    {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50
    },
    {
        headerName: '公司',
        field: 'companyName',
        width: 150
    },
    {
        headerName: '仓库类型名称',
        field: 'warehouseTypeName',
        width: 150
    },
    {
        headerName: '仓库名称',
        field: 'warehouseName',
        width: 150
    },
    {
        headerName: '物料大类',
        field: 'majorCategory',
        width: 150
    },
    {
        headerName: '物料中类',
        field: 'middleCategory',
        width: 150
    },
    {
        headerName: '物料小类',
        field: 'subCategory',
        width: 150
    },
    {
        headerName: '物料编号',
        field: 'materialCode',
        width: 150
    },
    {
        headerName: '物料名称',
        field: 'materialName',
        width: 150
    },
    {
        headerName: '数量',
        field: 'totalNum',
        width: 150
    },
    {
        headerName: '单位',
        field: 'unit',
        width: 150
    },
    {
        headerName: '规格',
        field: 'specification',
        width: 150
    },
    {
        headerName: '单价',
        field: 'price',
        width: 100
    },
    {
        headerName: '等级',
        field: 'grade',
        width: 100
    },
    {
        headerName: "以旧换新",
        field: "oldNewService",
        width: 100,
        cellRenderer: {
            template: `<a-checkbox v-model="val" disabled></a-checkbox>`,
            setup(props: any) {
                let val = ref()
                val.value =
                    props.params.data.oldNewService == null
                        ? false
                        : props.params.data.oldNewService == 1
                            ? true
                            : false
                return {
                    val,
                }
            },
        }
    },
    {
        field: 'fixAssetStatus',
        headerName: '是否固资',
        width: 100,
        cellRenderer: {
            template: `<a-checkbox v-model="val" disabled></a-checkbox>`,
            setup(props: any) {
                let val = ref()
                val.value =
                    props.params.data.fixAssetStatus == null
                        ? false
                        : props.params.data.fixAssetStatus == 1
                            ? true
                            : false
                return {
                    val,
                }
            },
        }
    },
]



const cgColumns5: any = [
    {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50
    },
    {
        field: 'purchaseOrderNo',
        headerName: '采购单号',
        width: 150,
    },
    {
        field: 'supplierName',
        headerName: '供应商名称',
        width: 150,
    },
    {
        field: 'majorCategory',
        headerName: '物料大类',
        width: 150,
    },
    {
        field: 'subCategory',
        headerName: '物料小类',
        width: 150,
    },
    {
        field: 'materialCode',
        headerName: '物料编号',
        width: 150,
    },
    {
        field: 'materialName',
        headerName: '物料名称',
        width: 150,
    },
    {
        field: 'specification',
        headerName: '规格',
        width: 150,
    },
    {
        field: 'price',
        headerName: '单价',
        width: 150,
    },
    {
        field: 'unit',
        headerName: '单位 ',
        width: 150,
    },
    {
        field: 'grade',
        headerName: '等级 ',
        width: 150,
    },
    {
        field: 'purchaseNum',
        headerName: '采购数量',
        width: 150,
    },
    {
        field: 'inStockNum',
        headerName: '采购入库数量',
        width: 150,
    },
    {
        field: 'stockNum',
        headerName: '库存数量 ',
        width: 150,
    },
    // {
    //     field: 'totalNum',
    //     key: 'totalNum',
    //     title: '已入库数量',
    //     slotName: 'totalNum',
    //     width: 150,
    // },
]
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const localeText1: any = ref(localeText)
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}
</script>
<style lang="less">
.cgisDatas {
    width: 85%;
    display: flex;
    justify-content: space-between;
}
</style>